<!doctype html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <title>Adminox - Responsive Web App Kit</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
  <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description"> 
  <meta content="Coderthemes" name="author"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <!-- App favicon --> 
  <link rel="shortcut icon" href="assets/images/favicon.ico"> 
  <!-- Custom box css --> 
  <link href="../plugins/custombox/css/custombox.min.css" rel="stylesheet"> 
  <!-- App css --> 
  <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
  <link href="assets/css/icons.css" rel="stylesheet" type="text/css"> 
  <link href="assets/css/metismenu.min.css" rel="stylesheet" type="text/css"> 
  <link href="assets/css/style.css" rel="stylesheet" type="text/css"> 
  <script src="assets/js/modernizr.min.js"></script> 
 </head> 
 <body> 
  <!-- Begin page --> 
  <div id="wrapper"> 
   <!-- Top Bar Start --> 
   <div class="topbar"> 
    <!-- LOGO --> 
    <div class="topbar-left"> 
     <a href="index1.html" class="logo"> <span> <img src="assets/images/logo.png" alt="" height="25"> </span> <i> <img src="assets/images/logo_sm.png" alt="" height="28"> </i> </a>
    </div> 
    <nav class="navbar-custom"> 
     <ul class="list-inline float-right mb-0"> 
      <li class="list-inline-item dropdown notification-list"> <a class="nav-link dropdown-toggle arrow-none waves-light waves-effect" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> <i class="dripicons-bell noti-icon"></i> <span class="badge badge-pink noti-icon-badge">4</span> </a> 
       <div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-lg" aria-labelledby="Preview"> 
        <!-- item--> 
        <div class="dropdown-item noti-title"> 
         <h5><span class="badge badge-danger float-right">5</span>Notification</h5> 
        </div> 
        <!-- item--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item"> 
         <div class="notify-icon bg-success">
          <i class="icon-bubble"></i>
         </div> <p class="notify-details">Robert S. Taylor commented on Admin<small class="text-muted">1 min ago</small></p> </a> 
        <!-- item--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item"> 
         <div class="notify-icon bg-info">
          <i class="icon-user"></i>
         </div> <p class="notify-details">New user registered.<small class="text-muted">1 min ago</small></p> </a> 
        <!-- item--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item"> 
         <div class="notify-icon bg-danger">
          <i class="icon-like"></i>
         </div> <p class="notify-details">Carlos Crouch liked <b>Admin</b><small class="text-muted">1 min ago</small></p> </a> 
        <!-- All--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item notify-all"> View All </a> 
       </div> </li> 
      <li class="list-inline-item dropdown notification-list"> <a class="nav-link dropdown-toggle waves-effect waves-light nav-user" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> <img src="assets/images/users/avatar-1.jpg" alt="user" class="rounded-circle"> </a> 
       <div class="dropdown-menu dropdown-menu-right profile-dropdown " aria-labelledby="Preview"> 
        <!-- item--> 
        <div class="dropdown-item noti-title"> 
         <h5 class="text-overflow"><small>Welcome ! John</small> </h5> 
        </div> 
        <!-- item--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="zmdi zmdi-account-circle"></i> <span>Profile</span> </a> 
        <!-- item--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="zmdi zmdi-settings"></i> <span>Settings</span> </a> 
        <!-- item--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="zmdi zmdi-lock-open"></i> <span>Lock Screen</span> </a> 
        <!-- item--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="zmdi zmdi-power"></i> <span>Logout</span> </a> 
       </div> </li> 
     </ul> 
     <ul class="list-inline menu-left mb-0"> 
      <li class="float-left"> <button class="button-menu-mobile open-left waves-light waves-effect"> <i class="dripicons-menu"></i> </button> </li> 
      <li class="hide-phone app-search"> 
       <form role="search" class=""> 
        <input type="text" placeholder="Search..." class="form-control"> 
        <a href=""><i class="fa fa-search"></i></a> 
       </form> </li> 
     </ul> 
    </nav> 
   </div> 
   <!-- Top Bar End --> 
   <!-- ========== Left Sidebar Start ========== --> 
   <div class="left side-menu"> 
    <div class="slimscroll-menu" id="remove-scroll"> 
     <!-- Sidemenu --> 
     <div id="sidebar-menu"> 
      <!-- Left Menu Start --> 
      <ul class="metismenu" id="side-menu"> 
       <li class="menu-title">Navigation</li> 
       <li> <a href="javascript: void(0);"> <i class="fi-air-play"></i><span class="badge badge-success pull-right">2</span> <span> Dashboard </span> </a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="index1.html">Dashboard 1</a></li>
         <li><a href="dashboard-2.html">Dashboard 2</a></li> 
        </ul> </li> 
       <li> <a href="javascript: void(0);"><i class="fi-target"></i> <span> Admin UI </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="admin-grid.html">Grid</a></li> 
         <li><a href="admin-sweet-alert.html">Sweet Alert</a></li> 
         <li><a href="admin-tiles.html">Tiles Box</a></li> 
         <li><a href="admin-nestable.html">Nestable List</a></li> 
         <li><a href="admin-rangeslider.html">Range Slider</a></li> 
         <li><a href="admin-ratings.html">Ratings</a></li> 
         <li><a href="admin-filemanager.html">File Manager</a></li> 
         <li><a href="admin-lightbox.html">Lightbox</a></li> 
         <li><a href="admin-scrollbar.html">Scroll bar</a></li> 
         <li><a href="admin-slider.html">Slider</a></li> 
         <li><a href="admin-treeview.html">Treeview</a></li> 
        </ul> </li> 
       <li> <a href="javascript: void(0);"><i class="fi-briefcase"></i> <span> UI Kit </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="ui-typography.html">Typography</a></li> 
         <li><a href="ui-panels.html">Panels</a></li> 
         <li><a href="ui-buttons.html">Buttons</a></li> 
         <li><a href="ui-modals.html">Modals</a></li> 
         <li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li> 
         <li><a href="ui-spinners.html">Spinners</a></li> 
         <li><a href="ui-ribbons.html">Ribbons</a></li> 
         <li><a href="ui-portlets.html">Portlets</a></li> 
         <li><a href="ui-tabs.html">Tabs</a></li> 
         <li><a href="ui-progressbars.html">Progress Bars</a></li> 
         <li><a href="ui-notifications.html">Notification</a></li> 
         <li><a href="ui-carousel.html">Carousel</a> </li>
         <li><a href="ui-video.html">Video</a> </li>
         <li><a href="ui-tooltips-popovers.html">Tooltips &amp; Popovers</a></li> 
         <li><a href="ui-images.html">Images</a></li> 
         <li><a href="ui-bootstrap.html">Bootstrap UI</a></li> 
        </ul> </li> 
       <li> <a href="tickets.html"><i class="fi-help"></i><span class="badge badge-danger pull-right">New</span> <span> Tickets </span></a> </li> 
       <li> <a href="javascript: void(0);"><i class="fi-box"></i><span> Icons </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="icons-colored.html">Colored Icons</a></li> 
         <li><a href="icons-materialdesign.html">Material Design</a></li> 
         <li><a href="icons-dripicons.html">Dripicons</a></li> 
         <li><a href="icons-fontawesome.html">Font awesome</a></li> 
         <li><a href="icons-feather.html">Feather Icons</a></li> 
         <li><a href="icons-simple-line.html">Simple line Icons</a></li> 
         <li><a href="icons-flags.html">Flag Icons</a></li> 
         <li><a href="icons-file.html">File Icons</a></li> 
         <li><a href="icons-pe7.html">PE7 Icons</a></li> 
         <li><a href="icons-typicons.html">Typicons</a></li> 
        </ul> </li> 
       <li> <a href="javascript: void(0);"><i class="fi-bar-graph-2"></i><span> Graphs </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="chart-flot.html">Flot Chart</a></li> 
         <li><a href="chart-morris.html">Morris Chart</a></li> 
         <li><a href="chart-google.html">Google Chart</a></li> 
         <li><a href="chart-echart.html">Echarts</a></li> 
         <li><a href="chart-chartist.html">Chartist Charts</a></li> 
         <li><a href="chart-chartjs.html">Chartjs Chart</a></li> 
         <li><a href="chart-c3.html">C3 Chart</a></li> 
         <li><a href="chart-justgage.html">Justgage Charts</a></li> 
         <li><a href="chart-sparkline.html">Sparkline Chart</a></li> 
         <li><a href="chart-knob.html">Jquery Knob</a></li> 
        </ul> </li> 
       <li> <a href="javascript: void(0);"><i class="fi-mail"></i><span> Email </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="email-inbox.html">Inbox</a></li> 
         <li><a href="email-read.html">Read Email</a></li> 
         <li><a href="email-compose.html">Compose Email</a></li> 
        </ul> </li> 
       <li> <a href="taskboard.html"><i class="fi-paper"></i> <span> Task Board </span></a> </li> 
       <li> <a href="javascript: void(0);"><i class="fi-disc"></i><span class="badge badge-warning pull-right">12</span> <span> Forms </span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="form-elements.html">Form Elements</a></li> 
         <li><a href="form-advanced.html">Form Advanced</a></li> 
         <li><a href="form-layouts.html">Form Layouts</a></li> 
         <li><a href="form-validation.html">Form Validation</a></li> 
         <li><a href="form-pickers.html">Form Pickers</a></li> 
         <li><a href="form-wizard.html">Form Wizard</a></li> 
         <li><a href="form-mask.html">Form Masks</a></li> 
         <li><a href="form-summernote.html">Summernote</a></li> 
         <li><a href="form-wysiwig.html">Wysiwig Editors</a></li> 
         <li><a href="form-typeahead.html">Typeahead</a></li> 
         <li><a href="form-x-editable.html">X Editable</a></li> 
         <li><a href="form-uploads.html">Multiple File Upload</a></li> 
        </ul> </li> 
       <li> <a href="javascript: void(0);"><i class="fi-layout"></i> <span> Tables </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="tables-basic.html">Basic Tables</a></li> 
         <li><a href="tables-layouts.html">Tables Layouts</a></li> 
         <li><a href="tables-datatable.html">Data Tables</a></li> 
         <li><a href="tables-foo-tables.html">Foo Tables</a></li> 
         <li><a href="tables-responsive.html">Responsive Table</a></li> 
         <li><a href="tables-tablesaw.html">Tablesaw Tables</a></li> 
         <li><a href="tables-editable.html">Editable Tables</a></li> 
        </ul> </li> 
       <li class="menu-title">More</li> 
       <li> <a href="javascript: void(0);"><i class="fi-map"></i> <span> Maps </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="maps-google.html">Google Maps</a></li> 
         <li><a href="maps-google-full.html">Full Google Map</a></li> 
         <li><a href="maps-vector.html">Vector Maps</a></li> 
         <li><a href="maps-mapael.html">Mapael Maps</a></li> 
        </ul> </li> 
       <li><a href="calendar.html"><i class="fi-clock"></i> <span>Calendar</span> </a></li> 
       <li> <a href="javascript: void(0);"><i class="fi-paper-stack"></i><span> Pages </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="page-starter.html">Starter Page</a></li> 
         <li><a href="page-login.html">Login</a></li> 
         <li><a href="page-register.html">Register</a></li> 
         <li><a href="page-logout.html">Logout</a></li> 
         <li><a href="page-recoverpw.html">Recover Password</a></li> 
         <li><a href="page-lock-screen.html">Lock Screen</a></li> 
         <li><a href="page-confirm-mail.html">Confirm Mail</a></li> 
         <li><a href="page-404.html">Error 404</a></li> 
         <li><a href="page-404-alt.html">Error 404-alt</a></li> 
         <li><a href="page-500.html">Error 500</a></li> 
        </ul> </li> 
       <li class="has_sub"> <a href="javascript:void(0);"><i class="fi-marquee-plus"></i><span> Extra Pages </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="extras-about.html">About Us</a></li> 
         <li><a href="extras-contact.html">Contact</a></li> 
         <li><a href="extras-companies.html">Companies</a></li> 
         <li><a href="extras-members.html">Members</a></li> 
         <li><a href="extras-members-2.html">Membars 2</a></li> 
         <li><a href="extras-timeline.html">Timeline</a></li> 
         <li><a href="extras-invoice.html">Invoice</a></li> 
         <li><a href="extras-maintenance.html">Maintenance</a></li> 
         <li><a href="extras-coming-soon.html">Coming Soon</a></li> 
         <li><a href="extras-faq.html">FAQ</a></li> 
         <li><a href="extras-pricing.html">Pricing</a></li> 
         <li><a href="extras-profile.html">Profile</a></li> 
         <li><a href="extras-email-template.html">Email Templates</a></li> 
         <li><a href="extras-search-result.html">Search Results</a></li> 
         <li><a href="extras-sitemap.html">Site Map</a></li> 
        </ul> </li> 
       <li> <a href="todo.html"><i class="fi-layers"></i> <span> Todo </span></a> </li> 
      </ul> 
     </div> 
     <!-- Sidebar --> 
     <div class="clearfix"></div> 
    </div> 
    <!-- Sidebar -left --> 
   </div> 
   <!-- Left Sidebar End --> 
   <!-- ============================================================== --> 
   <!-- Start right Content here --> 
   <!-- ============================================================== --> 
   <div class="content-page"> 
    <!-- Start content --> 
    <div class="content"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-12"> 
        <div class="page-title-box"> 
         <h4 class="page-title float-left">Modals</h4> 
         <ol class="breadcrumb float-right"> 
          <li class="breadcrumb-item"><a href="#">Adminox</a></li> 
          <li class="breadcrumb-item"><a href="#">UI Kit</a></li> 
          <li class="breadcrumb-item active">Modals</li> 
         </ol> 
         <div class="clearfix"></div> 
        </div> 
       </div> 
      </div> 
      <!-- end row --> 
      <!-- Bootstrap Modals --> 
      <div class="row"> 
       <div class="col-12"> 
        <div class="card-box"> 
         <h4 class="header-title m-t-0 m-b-30">Bootstrap Modals (default)</h4> 
         <p class="text-muted m-b-15 font-13"> A rendered modal with header, body, and set of actions in the footer. </p> 
         <!-- sample modal content --> 
         <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
          <div class="modal-dialog"> 
           <div class="modal-content"> 
            <div class="modal-header"> 
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
             <h4 class="modal-title" id="myModalLabel">Modal Heading</h4> 
            </div> 
            <div class="modal-body"> 
             <h4>Text in a modal</h4> 
             <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> 
             <hr> 
             <h4>Overflowing text to show scroll behavior</h4> 
             <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> 
             <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> 
             <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> 
             <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> 
             <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> 
             <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> 
             <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> 
             <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> 
             <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> 
            </div> 
            <div class="modal-footer"> 
             <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button> 
             <button type="button" class="btn btn-primary waves-effect waves-light">Save changes</button> 
            </div> 
           </div>
           <!-- /.modal-content --> 
          </div>
          <!-- /.modal-dialog --> 
         </div>
         <!-- /.modal --> 
         <!--  Modal content for the above example --> 
         <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;"> 
          <div class="modal-dialog modal-lg"> 
           <div class="modal-content"> 
            <div class="modal-header"> 
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
             <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4> 
            </div> 
            <div class="modal-body">
              ... 
            </div> 
           </div>
           <!-- /.modal-content --> 
          </div>
          <!-- /.modal-dialog --> 
         </div>
         <!-- /.modal --> 
         <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" style="display: none;"> 
          <div class="modal-dialog modal-sm"> 
           <div class="modal-content"> 
            <div class="modal-header"> 
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
             <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4> 
            </div> 
            <div class="modal-body">
              ... 
            </div> 
           </div>
           <!-- /.modal-content --> 
          </div>
          <!-- /.modal-dialog --> 
         </div>
         <!-- /.modal --> 
         <div class="button-list"> 
          <!-- Button trigger modal --> 
          <button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#myModal">Standard Modal</button> 
          <!-- Large modal --> 
          <button type="button" class="btn btn-info waves-effect waves-light" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> 
          <!-- Small modal --> 
          <button type="button" class="btn btn-custom waves-effect waves-light" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button> 
         </div> 
        </div> 
       </div> 
      </div> 
      <!-- Custom Modals --> 
      <div class="row"> 
       <div class="col-12"> 
        <div class="card-box"> 
         <h4 class="header-title m-t-0 m-b-30">Custom Modals</h4> 
         <p class="text-muted m-b-15 font-13"> Examples of custom modals. </p> 
         <!-- sample modal content --> 
         <div id="custom-width-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true" style="display: none;"> 
          <div class="modal-dialog" style="width:55%;"> 
           <div class="modal-content"> 
            <div class="modal-header"> 
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
             <h4 class="modal-title" id="custom-width-modalLabel">Modal Heading</h4> 
            </div> 
            <div class="modal-body"> 
             <h4>Text in a modal</h4> 
             <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> 
             <hr> 
             <h4>Overflowing text to show scroll behavior</h4> 
             <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> 
            </div> 
            <div class="modal-footer"> 
             <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button> 
             <button type="button" class="btn btn-primary waves-effect waves-light">Save changes</button> 
            </div> 
           </div>
           <!-- /.modal-content --> 
          </div>
          <!-- /.modal-dialog --> 
         </div>
         <!-- /.modal --> 
         <div id="full-width-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="full-width-modalLabel" aria-hidden="true" style="display: none;"> 
          <div class="modal-dialog modal-full"> 
           <div class="modal-content"> 
            <div class="modal-header"> 
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
             <h4 class="modal-title" id="full-width-modalLabel">Modal Heading</h4> 
            </div> 
            <div class="modal-body"> 
             <h4>Text in a modal</h4> 
             <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> 
             <hr> 
             <h4>Overflowing text to show scroll behavior</h4> 
             <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> 
            </div> 
            <div class="modal-footer"> 
             <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button> 
             <button type="button" class="btn btn-primary waves-effect waves-light">Save changes</button> 
            </div> 
           </div>
           <!-- /.modal-content --> 
          </div>
          <!-- /.modal-dialog --> 
         </div>
         <!-- /.modal --> 
         <div id="con-close-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"> 
          <div class="modal-dialog"> 
           <div class="modal-content"> 
            <div class="modal-header"> 
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
             <h4 class="modal-title">Modal Content is Responsive</h4> 
            </div> 
            <div class="modal-body"> 
             <div class="row"> 
              <div class="col-md-6"> 
               <div class="form-group"> 
                <label for="field-1" class="control-label">Name</label> 
                <input type="text" class="form-control" id="field-1" placeholder="John"> 
               </div> 
              </div> 
              <div class="col-md-6"> 
               <div class="form-group"> 
                <label for="field-2" class="control-label">Surname</label> 
                <input type="text" class="form-control" id="field-2" placeholder="Doe"> 
               </div> 
              </div> 
             </div> 
             <div class="row"> 
              <div class="col-md-12"> 
               <div class="form-group"> 
                <label for="field-3" class="control-label">Address</label> 
                <input type="text" class="form-control" id="field-3" placeholder="Address"> 
               </div> 
              </div> 
             </div> 
             <div class="row"> 
              <div class="col-md-4"> 
               <div class="form-group"> 
                <label for="field-4" class="control-label">City</label> 
                <input type="text" class="form-control" id="field-4" placeholder="Boston"> 
               </div> 
              </div> 
              <div class="col-md-4"> 
               <div class="form-group"> 
                <label for="field-5" class="control-label">Country</label> 
                <input type="text" class="form-control" id="field-5" placeholder="United States"> 
               </div> 
              </div> 
              <div class="col-md-4"> 
               <div class="form-group"> 
                <label for="field-6" class="control-label">Zip</label> 
                <input type="text" class="form-control" id="field-6" placeholder="123456"> 
               </div> 
              </div> 
             </div> 
             <div class="row"> 
              <div class="col-md-12"> 
               <div class="form-group no-margin"> 
                <label for="field-7" class="control-label">Personal Info</label> 
                <textarea class="form-control" id="field-7" placeholder="Write something about yourself"></textarea> 
               </div> 
              </div> 
             </div> 
            </div> 
            <div class="modal-footer"> 
             <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button> 
             <button type="button" class="btn btn-info waves-effect waves-light">Save changes</button> 
            </div> 
           </div> 
          </div> 
         </div>
         <!-- /.modal --> 
         <div id="accordion-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"> 
          <div class="modal-dialog"> 
           <div class="modal-content p-0"> 
            <div id="accordion" role="tablist" aria-multiselectable="true"> 
             <div class="card"> 
              <div class="card-header" role="tab" id="headingOne"> 
               <h5 class="mb-0 mt-0"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h5> 
              </div> 
              <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne"> 
               <div class="card-block">
                 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
               </div> 
              </div> 
             </div> 
             <div class="card"> 
              <div class="card-header" role="tab" id="headingTwo"> 
               <h5 class="mb-0 mt-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h5> 
              </div> 
              <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> 
               <div class="card-block">
                 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
               </div> 
              </div> 
             </div> 
             <div class="card"> 
              <div class="card-header" role="tab" id="headingThree"> 
               <h5 class="mb-0 mt-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h5> 
              </div> 
              <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree"> 
               <div class="card-block">
                 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
               </div> 
              </div> 
             </div> 
            </div> 
           </div>
           <!-- /.modal-content --> 
          </div>
          <!-- /.modal-dialog --> 
         </div>
         <!-- /.modal --> 
         <div class="button-list"> 
          <!-- Custom width modal --> 
          <button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#custom-width-modal">Custom width Modal</button> 
          <!-- Full width modal --> 
          <button type="button" class="btn btn-info waves-effect waves-light" data-toggle="modal" data-target="#full-width-modal">Full width Modal</button> 
          <!-- Responsive modal --> 
          <button type="button" class="btn btn-custom waves-effect waves-light" data-toggle="modal" data-target="#con-close-modal">Responsive Modal</button> 
          <!-- Accordion modal --> 
          <button type="button" class="btn btn-purple waves-effect waves-light" data-toggle="modal" data-target="#accordion-modal">Accordion in Modal</button> 
         </div> 
        </div> 
       </div>
       <!-- end col --> 
      </div> 
      <!-- End row --> 
      <!-- Custom Modals --> 
      <div class="row"> 
       <div class="col-12"> 
        <div class="card-box"> 
         <h4 class="header-title m-t-0 m-b-30">Modal with Pages</h4> 
         <p class="text-muted m-b-15 font-13"> Examples of custom modals. </p> 
         <!-- Signup modal content --> 
         <div id="signup-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true" style="display: none;"> 
          <div class="modal-dialog"> 
           <div class="modal-content"> 
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
            <div class="modal-body"> 
             <h2 class="text-uppercase text-center m-b-30"> <a href="index1.html" class="text-success"> <span><img src="assets/images/logo_dark.png" alt="" height="30"></span> </a> </h2>
             <form class="form-horizontal" action="#"> 
              <div class="form-group m-b-25"> 
               <div class="col-xs-12"> 
                <label for="username">Name</label> 
                <input class="form-control" type="email" id="username" required placeholder="Michael Zenaty"> 
               </div> 
              </div> 
              <div class="form-group m-b-25"> 
               <div class="col-xs-12"> 
                <label for="emailaddress">Email address</label> 
                <input class="form-control" type="email" id="emailaddress" required placeholder="john@deo.com"> 
               </div> 
              </div> 
              <div class="form-group m-b-25"> 
               <div class="col-xs-12"> 
                <label for="password">Password</label> 
                <input class="form-control" type="password" required id="password" placeholder="Enter your password"> 
               </div> 
              </div> 
              <div class="form-group m-b-20"> 
               <div class="col-xs-12"> 
                <div class="checkbox checkbox-custom"> 
                 <input id="checkbox11" type="checkbox" checked> 
                 <label for="checkbox11"> I accept <a href="#">Terms and Conditions</a> </label> 
                </div> 
               </div> 
              </div> 
              <div class="form-group account-btn text-center m-t-10"> 
               <div class="col-xs-12"> 
                <button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button> 
               </div> 
              </div> 
             </form> 
            </div> 
           </div>
           <!-- /.modal-content --> 
          </div>
          <!-- /.modal-dialog --> 
         </div>
         <!-- /.modal --> 
         <!-- Signup modal content --> 
         <div id="login-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true" style="display: none;"> 
          <div class="modal-dialog"> 
           <div class="modal-content"> 
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
            <div class="modal-body"> 
             <h2 class="text-uppercase text-center m-b-30"> <a href="index1.html" class="text-success"> <span><img src="assets/images/logo_dark.png" alt="" height="30"></span> </a> </h2>
             <form class="form-horizontal" action="#"> 
              <div class="form-group m-b-25"> 
               <div class="col-xs-12"> 
                <label for="emailaddress1">Email address</label> 
                <input class="form-control" type="email" id="emailaddress1" required placeholder="john@deo.com"> 
               </div> 
              </div> 
              <div class="form-group m-b-25"> 
               <div class="col-xs-12"> 
                <a href="page-recoverpw.html" class="text-muted pull-right font-14">Forgot your password?</a> 
                <label for="password1">Password</label> 
                <input class="form-control" type="password" required id="password1" placeholder="Enter your password"> 
               </div> 
              </div> 
              <div class="form-group m-b-20"> 
               <div class="col-xs-12"> 
                <div class="checkbox checkbox-custom"> 
                 <input id="checkbox12" type="checkbox" checked> 
                 <label for="checkbox12"> Remember me </label> 
                </div> 
               </div> 
              </div> 
              <div class="form-group account-btn text-center m-t-10"> 
               <div class="col-xs-12"> 
                <button class="btn w-lg btn-rounded btn-lg btn-custom waves-effect waves-light" type="submit">Sign In</button> 
               </div> 
              </div> 
             </form> 
            </div> 
           </div>
           <!-- /.modal-content --> 
          </div>
          <!-- /.modal-dialog --> 
         </div>
         <!-- /.modal --> 
         <div class="button-list"> 
          <!-- Custom width modal --> 
          <button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#signup-modal">Sign Up Modal</button> 
          <!-- Full width modal --> 
          <button type="button" class="btn btn-info waves-effect waves-light" data-toggle="modal" data-target="#login-modal">Log in Modal</button> 
         </div> 
        </div> 
       </div>
       <!-- end col --> 
      </div> 
      <!-- End row --> 
      <!-- Custom Modals --> 
      <div class="row"> 
       <div class="col-12"> 
        <div class="card-box"> 
         <h4 class="header-title m-t-0 m-b-30">Modals Examples (Animations)</h4> 
         <p class="text-muted m-b-15 font-13">Use<code>data-animation="xxx" data-plugin="custommodal" data-overlaySpeed="xxx" data-overlayColor="#xxx"</code>. </p> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="fadein" data-plugin="custommodal" data-overlayspeed="200" data-overlaycolor="#36404a">Fade in</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="slide" data-plugin="custommodal" data-overlayspeed="200" data-overlaycolor="#36404a">Slide</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="newspaper" data-plugin="custommodal" data-overlayspeed="200" data-overlaycolor="#36404a">Newspaper</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="fall" data-plugin="custommodal" data-overlayspeed="100" data-overlaycolor="#36404a">Fall</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="sidefall" data-plugin="custommodal" data-overlayspeed="100" data-overlaycolor="#36404a">Side Fall</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="blur" data-plugin="custommodal" data-overlayspeed="100" data-overlaycolor="#36404a">Blur</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="flip" data-plugin="custommodal" data-overlayspeed="100" data-overlaycolor="#36404a">Flip</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="sign" data-plugin="custommodal" data-overlayspeed="100" data-overlaycolor="#36404a">Sign</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="superscaled" data-plugin="custommodal" data-overlayspeed="100" data-overlaycolor="#36404a">Super Scaled</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="slit" data-plugin="custommodal" data-overlayspeed="100" data-overlaycolor="#36404a">Slit</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="rotate" data-plugin="custommodal" data-overlayspeed="100" data-overlaycolor="#36404a">Rotate</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="letmein" data-plugin="custommodal" data-overlayspeed="100" data-overlaycolor="#36404a">Letmein</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="makeway" data-plugin="custommodal" data-overlayspeed="100" data-overlaycolor="#36404a">Makeway</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="slip" data-plugin="custommodal" data-overlayspeed="100" data-overlaycolor="#36404a">Slip</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="corner" data-plugin="custommodal" data-overlayspeed="100" data-overlaycolor="#36404a">Corner</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="slidetogether" data-plugin="custommodal" data-overlayspeed="100" data-overlaycolor="#36404a">Slide together</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="scale" data-plugin="custommodal" data-overlayspeed="100" data-overlaycolor="#36404a">Scale</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="door" data-plugin="custommodal" data-overlayspeed="100" data-overlaycolor="#36404a">Door</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="push" data-plugin="custommodal" data-overlayspeed="100" data-overlaycolor="#36404a">Push</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="contentscale" data-plugin="custommodal" data-overlayspeed="100" data-overlaycolor="#36404a">Content Scale</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="swell" data-plugin="custommodal" data-overlayspeed="100" data-overlaycolor="#36404a">Swell</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="rotatedown" data-plugin="custommodal" data-overlayspeed="100" data-overlaycolor="#36404a">Rotate Down</a> 
         <a href="#custom-modal" class="btn btn-secondary waves-effect w-md m-r-5 m-b-10" data-animation="flash" data-plugin="custommodal" data-overlayspeed="100" data-overlaycolor="#36404a">Flash</a> 
        </div> 
       </div>
       <!-- end col --> 
      </div> 
      <!-- End row --> 
     </div> 
     <!-- container --> 
    </div> 
    <!-- content --> 
    <footer class="footer text-right">
      2017 © Adminox. - Coderthemes.com 
    </footer> 
   </div> 
   <!-- ============================================================== --> 
   <!-- End Right content here --> 
   <!-- ============================================================== --> 
  </div> 
  <!-- END wrapper --> 
  <!-- Modal --> 
  <div id="custom-modal" class="modal-demo"> 
   <button type="button" class="close" onclick="Custombox.close();"> <span>×</span><span class="sr-only">Close</span> </button> 
   <h4 class="custom-modal-title">Modal title</h4> 
   <div class="custom-modal-text">
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
   </div> 
  </div> 
  <!-- jQuery  --> 
  <script src="assets/js/jquery.min.js"></script> 
  <script src="assets/js/tether.min.js"></script>
  <!-- Tether for Bootstrap --> 
  <script src="assets/js/bootstrap.min.js"></script> 
  <script src="assets/js/metisMenu.min.js"></script> 
  <script src="assets/js/waves.js"></script> 
  <script src="assets/js/jquery.slimscroll.js"></script> 
  <!-- Modal-Effect --> 
  <script src="../plugins/custombox/js/custombox.min.js"></script> 
  <script src="../plugins/custombox/js/legacy.min.js"></script> 
  <!-- App js --> 
  <script src="assets/js/jquery.core.js"></script> 
  <script src="assets/js/jquery.app.js"></script>  
 </body>
</html>